<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
</style>

<body>
    <div id="myDiv" class="bd" title="Body Text">
        DOM0 onclick
        div这个是用来测试
    </div>

    <!-- 当绑定了这个点击函数时 就创建了执行函数的对象的一系列属性 -->
    <input type="button" value="html上绑定click1" onclick="console.log(this.value);">
    <input type="button" value="html上绑定click2" onclick="console.log(this);">

    <input type="button" value="DOM2 添加事件监听3" id="input_3">
    <input type="button" value="IE attachEvent" id="input_4">
</body>
<script>
    window.onload = function () {

        var handleClick = function (event) {
            // this作用域 绑定的是当前的元素
            console.log("事件类型：event.type:"+event.type);
            console.log("ID:" + this.id);
            // 移除事件 使用addEventListener 绑定的事件必须使用removeEventListener 移除事件 且参数需一致
            this.removeEventListener("click", handleClick, false);
        }

        var handleClickIE = function (event) {
            console.log("事件类型：event.type:"+event.type);
            var input_4 = document.getElementById("input_4");
            console.log("clicked");
            // 移除事件 attachEvent 绑定的事件必须使用 detachEvent 移除事件 且参数需一致
            //这里不能使用this来移除 在IE中事件处理中this绑定的作用域是window
            console.log(this === window); //true
            input_4.detachEvent("onclick", handleClickIE);
        }

        // 删除事件处理程序 例如 ele.onclick=function(){} 才可以
        function removeEvent(ele, type) {
            ele[type] = ele[type] && null;
        }

        (function () {
            // DOM0事件处理程序
            var myDiv = document.getElementById("myDiv");
            // this作用域 绑定的是当前的元素
            myDiv.onclick = function () { 
                this.style.backgroundColor = "red";
                this.style.lineHeight = '50px';
                console.log("id:" + this.id + ",className:" + this.className);
            }
        })();

        (function () {
            // DOM2事件处理程序
            var input_3 = document.getElementById("input_3");
            if(typeof input_3.addEventListener ==='function'){
                input_3.addEventListener('click', handleClick, false);
            }else{
                console.log("input_3 这里使用的是addEventListener方法 暂不支持");
            }
        })();

        (function () {
            //IE 事件处理程序
            var input_4 = document.getElementById("input_4");
            if(typeof input_4.attachEvent ==='function'){
                input_4.attachEvent("onclick", handleClickIE);
            }else{
                console.log("input_4 这里使用的是IE attachEvent方法 暂不支持");
            }
        })();



    }
</script>



</html>